<template>
  <div>
    <div v-for="(item, index ) in cardList" style="float:left;">
      <el-card shadow="hover" id="card">
        <img :src="item.imgUrl" id="img">
        <table style="font-size: 14px;color: #999999;border-collapse:separate; border-spacing:0px 5px;">

          <tr>
            <td align="left" style="width: 110px;">购箱城市:</td>
            <td align="right">
              <template v-if="item.carryCityName.length < 6">
                <span style="font-size: 16px;font-weight: 600;color: black;">{{ item.carryCityName }}/</span>
                <span v-if="carryCityCountry.length < 7">
                  {{ item.carryCountryName }}
                </span>
                <template v-else>

                  <el-popover placement="top-start" :width="200" trigger="hover" :content="carryCityCountry">
                    <template #reference>
                      <span>
                        {{ carryCityCountry.substring(item.carryCityName.length + 1, 5) }}
                        <span>...</span>
                      </span>
                    </template>
                  </el-popover>

                </template>
              </template>
              <template v-else>

                <el-popover placement="top-start" :width="200" trigger="hover" :content="carryCityCountry">
                  <template #reference>
                    <span style="font-size: 16px;">{{ item.carryCityName.subString(0, 5) }}
                      <span>...</span>
                    </span>
                  </template>
                </el-popover>

              </template>
            </td>
          </tr>

          <tr>
            <td align="left" style="width: 110px;">箱型/箱况:</td>
            <td align="right" style="width: 128px;color: black;">
              {{ boxTypeFilter(item.boxType) }}/
              {{ boxConditionFilter(item.boxCondition) }} </td>
          </tr>

          <tr>
            <td align="left" style="width: 110px;">可购箱量:</td>
            <td align="right" style="width: 128px;color: black;"> {{ item.inventory }} 个 </td>
          </tr>

          <tr>
            <td align="left" style="width: 110px;">购箱单价:</td>
            <td align="right" style="width: 128px;color: red;"> ￥{{ item.unitPrice }} </td>
          </tr>

          <tr style="height: 5px;"></tr>
          <tr>
            <td align="left">
              <el-button icon="ChatDotSquare" type="primary" plain style="width: 80px;">咨询</el-button>
            </td>

            <td align="right">
              <el-button type="primary" v-if="item.companyId != param.companyId" @click="handleXiaDan(item)"
                style="width: 80px;">下单</el-button>
            </td>
          </tr>

        </table>

      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { ChatDotSquare } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import orderInfo from '@/store/modules/order'
const userStore = useUserStore()

const emit = defineEmits(['handleXiaDan'])

const props = defineProps({
  cardData: {
    type: Object,
    default: () => { }
  },
  cardList: {
    type: Array,
    default: () => []
  }
})

const param = ref({
  companyId: 0
})
onMounted(() => {
  const user = userStore.getUser() //user信息
  param.value.companyId = user.companyId
})

const carryCityCountry = computed(() => {
  const obj = props.cardData
  let cityCountry = obj.carryCityName + '/' + obj.carryCountryName
  return cityCountry
})
const returnCityCountry = computed(() => {
  const obj = props.cardData
  let cityCountry = obj.returnCityName + '/' + obj.returnCountryName
  return cityCountry
})

//下单
const router = useRouter();
const handleXiaDan = (row: any) => {
  orderInfo().setRowData(row)
  router.push('agentBuyBoxInfo')
};

//过滤
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

</script>

<style scoped>
#card {
  opacity: 1;
  background: #ffffff;
  margin: 5px;
  text-align: center;
  overflow: hidden;
}

#img {
  width: 238px;
  height: 238px;
  opacity: 1;
  border-radius: 1px;
}

:deep(.el-card .el-card__body) {
  padding: 12px !important;
}
</style>
